<template>
    <div class="contract">
        <ToolBar :names="names"></ToolBar>




        <div class="tab-content">
            <div class="dataList" v-for="(l,index) in list" :key="index">
                <div class="name" @click="changesta(l.title)">
                    <span class="title">{{l.title}}<span>/USDT</span></span>
                    <span class="date">周期</span>
                </div>

                <div class="name" @click.prevent="changesta(l.title)">
                    <span class="title">{{l.price}}</span>
                    <span class="date">￥{{l.CNY}}</span>
                </div>
                <div class="button" @click.prevent="changesta(l.title)" :class="l.lv<0?'active':''">
                    <span>{{l.lv*100|parseint}}%</span>
                </div>
                <div class="switch">
                    <el-switch v-model="l.x==1"
                            active-color="#13ce66"
                            @change="changeShow(l.x,l.title)"
                            inactive-color="#D0D0D1"
                    >
                    </el-switch>
                </div>

                <div class="open" v-if="show == l.title">
					<div class="list-item">
					   <span class="item-title">30分钟<i><img class="ts" :src="tsicon" alt />
          </i></span>
					    <span>
					        <input type="checkbox" :checked="l.time|ischeck(0.5)" @change="changeCheck" class="input_check" id="check0" value="0.5"/>
					        <label for="check0"></label>
					    </span>
					</div>
                    <div class="list-item">
                       <span class="item-title">1小时</span>
                        <span>
                            <input type="checkbox" :checked="l.time|ischeck(1)" @change="changeCheck" class="input_check" id="check1" value="1"/>
                            <label for="check1"></label>
                        </span>
                    </div>
                    <div class="list-item">
                        <span class="item-title">4小时</span>
                        <span>
                            <input type="checkbox" :checked="l.time|ischeck(4)" @change="changeCheck" class="input_check" id="check2" value="4"/>
                            <label for="check2"></label>
                        </span>
                    </div>
                    <div class="list-item">
                        <span class="item-title">日线</span>
                        <span>
                            <input type="checkbox" :checked="l.time|ischeck(24)" @change="changeCheck" class="input_check" id="check3" value="24"/>
                            <label for="check3"></label>
                        </span>
                    </div>
                </div>

            </div>

        </div>
    </div>
</template>

<script>
    import ToolBar from "@/components/Home/ToolBar.vue"
	import tsicon from "@/assets/img/heyue.png"
    export default {
        name: "deviation",
        components:{
            ToolBar
        },
        data(){
            return {
				tsicon:tsicon,
                names:'背离提醒',
                value:false,
                value1:false,
                value2:false,
                checked:false,
                checked2:false,
                checked3:false,
                show:'',
                show2:false,
                list:[]
            }
        },
        filters:{
            parseint(val){
                let num = ''
                if(val>0){
                    num = '+' + val.toFixed(2)
                }else{
                    num = val.toFixed(2)
                }
                return num
            },
            ischeck(str,val){
                let flag = 0
                str = str.split(',')
                for(const i of str){
                    if(val == i){
                        flag++
                    }
                }
                if(flag>0){
                    return true
                }else{
                    return false
                }

            }
        },
        mounted(){
            this.getList()
        },
        methods:{
            changesta(title){
                if(this.show == title){
                    this.show = ''
                }else{
                    this.show = title
                }



            },
            changeShow(x,title){
                let data = {
                    token:this.getCookie("token"),
                    title:title,
                    time:'0.5,1,4,24'
                }
                if(x == 1){
                    this.$api.home.BeiLiMindDel(data).then(res=> {
                        // 执行某些操作
                        this.getList()

                    })
                }else{
                    if(this.show == title){
                        this.show = ''
                    }else{
                        this.show = title
                    }
                }
            },
            getList(){
                this.$api.home.BeiLiMindList(this.getCookie('token')).then(res=> {
                    // 执行某些操作
                    this.list = res.data.data

                })
            },
            changeCheck(){
                let data = {
                    token:this.getCookie("token"),
                    title:this.show,
                    time:event.target.value*1
                }


                if(event.target.checked){
                    this.$api.home.BeiLiMindSet(data).then(res=> {
                        // 执行某些操作
                        this.getList()

                    })
                }else{
                    this.$api.home.BeiLiMindDel(data).then(res=> {
                        // 执行某些操作
                        this.getList()

                    })

                }
            }
        }
    }
</script>

<style scoped>
    .contract{
        position: relative;
        top: 3rem;
        left: 0;
        right: 0;
        background: #fff;
        /*overflow: hidden;*/
    }
    .tab-content{
        background: #fff;
        position: absolute;
        height: 50rem;
        top: 0;
        left: 0;
        right: 0;
        z-index: -1;
        padding-top: 0;
        padding-left: 0.5rem;
        padding-right: 0.5rem;

    }
    .dataList{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        border-bottom: 1px solid #eee;
        flex-wrap: wrap;
    }
    .dataList>div{
        width: 25%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        padding: 0.5rem 0;
        min-height: 4rem;

    }
    .dataList>div:first-child{
        padding-left: 1rem;
    }
    .name>span{
        display: inline-flex;
        width: 100%;
        justify-content: center;
        align-items: center;
    }
    .dataList>div:first-child span{
        justify-content: flex-start;
    }
    .title{
        font-size:0.94rem;
        font-family:PingFang SC;
        font-weight:bold;
        color:rgba(51,51,51,1);

    }
    .title span{
        font-size:0.75rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(153,153,153,1);

    }
    .date{
        font-size:0.75rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(153,153,153,1);
    }
    .button span{
        width:4rem;
        height:1.75rem;
        background:rgba(20,163,101,1);
        border-radius:0.2rem;
        font-size:0.88rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(254,255,255,1);
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }
    .button.active span{
        width:4rem;
        height:1.75rem;
        border-radius:0.2rem;
        background: #FF3131;
    }
    .open{
        width: 100% !important;
        min-height: 0!important;
        padding: 0!important;
    }
    .list-item{
        width: 90%;
        padding: .5rem 0;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size:0.88rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(102,102,102,1);
        border-bottom: 1px solid #eee;
    }
    .list-item:last-child{
        border:none;
    }

    .list-item span { position: relative; }
	.list-item span i {
	  position: relative;
	  top: -4px;
	  right: -3px;
	}
	.list-item span i img.ts {
	  width: 40px;
	}
    .list-item .input_check {
        position: absolute;
        width: 16px;
        height: 16px;
        visibility: hidden;
    }
    .list-item .input_check+label {
        display: inline-block;
        width: 16px;
        height: 16px;
        background: url('../../assets/img/icon_pay_uncheck.png') no-repeat;
        background-size: contain;
        border-radius: 50%;
    }
    .list-item .input_check:checked+label {

        background: url('../../assets/img/icon_pay_check.png') no-repeat;
        background-size: contain;
    }


</style>
<style>



</style>